<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>微信</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html{
        font-size: 16px;
    }
    body {
      display: flex;
    }
   .home {
       display: flex;
       height: 100vh;
       width: 100%;
       flex-direction: column;
   }

    .content {
        flex: 1;
        border: 0;
    }
    .menu{
        display: flex;
        height: 60px;
        border-top: 1px solid #e5f3ef;
    }
    .menu>li {
        display: flex;
        list-style: none;
        flex: 1;
    }
    .menu>li>a{
        display: flex;
        flex-direction: column;
        text-decoration: none;

        align-items: center;
        justify-content: center;
        margin: auto;
        color: black;
    }
    .menu>li>a>p{
        font-size:0.75rem ;
    }
      </style>
</head>
<body>
<div class="home">
    <iframe src="pages/head.html" name="wx-frame" class="content"></iframe>

    <ul class="menu">
        <li>
            <a href="pages/head.html" target="wx-frame">
                <img height="24" width="24" src="img/wechat.png" alt="">
                <p>微信</p>
            </a>

        </li>
        <li>
            <a href="pages/connect.html" target="wx-frame">
                <img height="24" width="24" src="img/connect.png" alt="">
                <p>通讯录</p>
            </a>

        </li>
        <li>
            <a href="pages/find.html" target="wx-frame">
                <img height="24" width="24" src="img/find.png" alt="">
                <p>发现</p>
            </a>

        </li>
        <li>
            <a href="pages/me.html" target="wx-frame">
                <img height="24" width="24" src="img/me.png" alt="">
                <p>我</p>
            </a>

        </li>
    </ul>
</div>
<div class="top"></div>
    <div class="center"></div>
<div class="bottom">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
</div>
</body>
</html>
